<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>满箱选择查询</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-list-swipe.css" />
    <link rel="stylesheet" type="text/css" href="../css/isDialog.css" />


    <style>
        body {
            font-family: Arial;
            background-color: #ffffff;
        }

        /* 输入框下面的列表标题行（未完成的检测单信息）样式 */

        p.cimc-grid-label {
            border-left: 0.25 rem solid rgba(22, 155, 213, 1);
            padding-left: 0.3 rem;
        }

        span.cimc-grid-label {
            color: #000;
            font-size: 16px;
        }

        ul.aui-list:before {
            height: 0px !important;
        }

        /**** 去掉条目的细线 ****/

        div.cimc-list-header {
            height: 1.8 rem !important;
            min-height: 0px !important;
        }

        /**** 每条条目的高度 ****/

        li.aui-list-item {
            min-height: 0px !important;
        }

        /* 去掉最小高度限制 */

        div.cimc-list-item-inner {
            min-height: 0px !important;
            /* 去掉最小高度限制 */
            padding-top: 0.2 rem;
            padding-right: 0.1 rem !important;
            height: 32px;
        }

        /* 去掉每一行自带的间隔线 */

        div.cimc-list-item-inner:after {
            height: 0px !important;
            background-color: #000000 !important;
        }

        /* 设置标签体字体大小 */

        div.cimc-list-item-inner-lable {
            text-align: left;
            padding-top: 0rem !important;
            padding-bottom: 0rem !important;
            text-align: left;
            font-size: 13px;
            /*width:50%;*/
        }

        .table {
            margin-bottom: 15px;
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table td {
            height: 40px;
            text-align: center;
            border: 1px solid #CBD6DE;
            font-size: 12px;
            padding: 0;
            margin: 0;
            vertical-align: middle !important;
        }

        .weui-form-preview {
            position: static;
            margin-bottom: 56rpx;
            background-color: transparent;
            padding-top: 10rpx;
        }

        .weui-form-preview:before {
            border-top: none;
            border-bottom: none;
        }

        .weui-form-preview:after {
            border-top: none;
            border-bottom: none;
        }

        .weui-form-preview__hd {
            position: static;
        }

        .view-content-height {
            line-height: 15px;
            font-weight: normal;
            padding-top: 5px;
        }

        .weui-form-preview__hd:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: none;
            left: 15px;
            right: 15px;
        }

        .weui-form-preview__hd::before {
            border-bottom: none;
        }

        .card {
            border: 2px solid #ffffff;
            border-radius: 6px;
            background-color: #ffffff;
            margin: 6px;
            margin-top: -5px;
        }

        .inline {
            display: inline
        }

        .weui-form-preview__item {
            overflow: hidden
        }

        .btn_color {
            background-color: #33ffcc;
            color: white;
        }

        .btn_color-start {
            background-image: linear-gradient(to right, #E3E0E0, #F2F2F2);
            color: black;
        }

        .btn_color-after {
            background-image: linear-gradient(to right, #A3A3A3, #A1A1A1);
            color: black;
        }

        .btn_radius {
            border-radius: 15px;
        }

        .show {
            display: flex;
        }

        .hide {
            display: flex;
            display: none;
        }

        .state {
            overFlow-x: scroll;
            overFlow-y: hidden;
            white-space: nowrap;
        }

        .aui-btn-block {
            display: block;
            width: 100%;
            padding: 5px 0;
            margin-bottom: 0;
            font-size: 0.9rem;
        }

        .table thead {
            width: calc(100% - 1em)
        }

        .table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        .table tbody {
            display: block;
            height: 140px;
            overflow-y: scroll;
        }

        .form-label {
            margin: 0 auto;
            height: 35px;
            line-height: 35px;
            font-size: 20px;
        }

        .form-group {
            display: inline-block;
        }

        .form-label2 {
            float: left;
            width: 80px;
            height: 35px;
            line-height: 35px;
            text-align: right;
        }

        .form-control {
            margin-left: 15px;
            /*display: block;*/
            width: 120px;
            height: 35px;
            padding: 6px 12px;
            font-size: 2.73333vw;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 4px;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-pull-left aui-btn" onclick="api.closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">
            安东叫料
        </div>
    </header>

    <ul class="aui-list aui-form-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">仓库</div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="选择/扫描 仓库" id="workCenterCode" value="" onclick="getIdSelector();" onfocus="focusFn(this)" />
                </div>
                <i class="aui-input-addon aui-iconfont aui-icon-right" onclick="goSelectWorkCenter()"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">库位</div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="选择/扫描 库位" id="workCellCode" value="" onclick="getIdSelector();" onfocus="focusFn(this)" />
                </div>
                <i class="aui-input-addon aui-iconfont aui-icon-right" onclick="goSelectWorkCell()"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">物料</div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="选择/扫描 物料" id="mrlCode" value="" onclick="getIdSelector();" onfocus="focusFn(this)">
                </div>
                <i class="aui-input-addon aui-iconfont aui-icon-right" onclick="goSelectMrl()"></i>
                <!-- <i class="aui-input-addon aui-iconfont aui-icon-right" onclick="goSelectMrl()"></i> -->
            </div>
        </li>
        <!-- <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">包装数</div>
                <div class="aui-list-item-input">
                    <input type="text" id="packageQty" value="" disabled="true">
                </div>
            </div>
        </li> -->
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">数量</div>
                <div class="aui-list-item-input">
                    <input type="number" id="qty" value="">
                </div>
            </div>
        </li>
    </ul>

    <div class="aui-bar-tab-item" tapmode id="scan" onclick="doScan()" style="text-align: center;">
        <i class="aui-iconfont aui-icon-scan aui-text-epblue" style="font-size: 1.8rem"></i>
    </div>
    <div class="aui-btn aui-btn-info aui-btn-block" onclick="addTable()">保存</div>
    <div class='aui-list-item-inner cimc-list-item-inner'
        style='margin-top:5px;height:30px;border: 1px solid #cdc1c1;padding-left: 10px;background-color: #f5f5f5;'>
        <div class="aui-list-item-label1" style="margin-top:6px;font-size: 14px;float:left;width:5%">
            <img src="../image/peeding.png" />
        </div>
        <div class='aui-grid-label cimc-list-item-inner-lable inline'
            style='margin-top: 4px;font-weight: 650; font-family: "Microsoft soft";font-size:15px;width:30%;float: left;'>
            叫料明细
        </div>

    </div>
    <div class="table-responsive" id="appStorage" style="overflow-y:auto;height: 13rem;">
        <table id="tab" class="table table-bordered " style="table-layout: fixed;">
            <thead>
                <tr id="tr1"
                    style="text-align: center;background-color: #DCE9F2;color: #467aa7;font-family: 微软雅黑;font-size: 13px;font-weight: bold;">

                    <td>序号</td>
                    <td>物料编码</td>
                    <td>物料名称</td>
                    <!-- <td>包装数</td> -->
                    <td>数量</td>
                </tr>
            </thead>
            <tbody id="mrlLine_tb">
            </tbody>
        </table>
    </div>
    </div>
    <div>
        <div style="height:60px;"></div>
        <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-btn aui-btn-info aui-btn-block" onclick="save()" id="submitButton">提交</div>
        </footer>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/public.js"></script>
<script type="text/javascript" src="../script/clickThrottle.js"></script>

<script type="text/javascript">
    //应用弹出框模块
    var idSelector = "";
    var workCenterGid = ""; //仓库GID
    var workCenterCode = ""; //仓库编码
    var workCenterName = ""; //仓库名称
    var workCellGid = ""; //库位GID
    var workCellCode = ""; //库位编码
    var workCellName = ""; //库位名称
    var mrlCode = "";//物料编码
    var mrlName = "";//物料名称

    var scanRule = ""; //条码解析规则
    var datalist = [];

    apiready = function () {
        api.setFocus({
            inputId: 'workCenterCode',
            focus: true
        })
        idSelector = "workCenterCode";
        //api.parseTapmode();

        //$("#workCenterCode").focus();
        //idSelector = "workCenterCode";
        //$("#huCode2").focus();
    };

    // 获取光标所在组件的id
    function getIdSelector() {
        var e = event || window.event;
        var el = e.srcElement || e.target;
        idSelector = el.id;
        $("#" + el.id).select();
    }

    function focusFn(ele){
        $api.attr(ele,'readonly', 'readonly');
            setTimeout(() => {
            $api.removeAttr(ele,'readonly');
            }, 200);
        };

    //保存按钮
    function save() {

        // //产线
        // var workCenterCode = $("#workCenterCode").val();
        // //库位
        // var workCellCode = $("#workCellCode").val();


		if (!clickThrottle()) {
            return;
        }

        if (datalist.length == 0) {
            api.toast({
                msg: '没有要提交的物料信息！',
                duration: 3000
            });
            return;
        }
        const submitButton = document.getElementById('submitButton');
        submitButton.style.pointerEvents = "none"
        api.showProgress({
            title: '保存中...',
        });
        var un = localStorage.getItem('un');
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/paAndonRequestMrlSave";
        var params = new Object();
        params.url = url;
        params.dataType = 'json';
        params.method = 'post';
        var data = {
            values: {
                workCenterCode: workCenterCode, // 目标库
                workCellCode: workCellCode, //调入库位
                datalist: JSON.stringify(datalist),//物料
                un: un
            }
        };
        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 300,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");
                //成功
                if (myobj.code == '0') {
                    api.hideProgress();
                    submitButton.style.pointerEvents = "auto"
                    api.toast({
                        msg: "保存成功",
                        duration: 3000
                    }); //清空表单

                    datalist = [];
                    $("#mrlLine_tb").empty();

                    api.setFocus({
                        inputId: 'mrlCode',
                        focus: true
                    })
                    idSelector = "mrlCode";


                } else {
                    api.hideProgress();
                    submitButton.style.pointerEvents = "auto"
                    api.toast({
                        msg: myobj.msg,
                        duration: 3000
                    });

                }
            }else{
                api.hideProgress();
                    submitButton.style.pointerEvents = "auto"
            }
        });
    }


    //扫描
    function doScan() {
        var moduleScanner = api.require('moduleScanner');

        var params = {
            top: 150, //扫描窗口的上边距
            width: 250, //扫描窗口的宽
            height: 250, //扫描窗口的高
            useColor: false, //是否使用自己设定的颜色(startColor和endColor),
            //如果不使用设定的颜色就使用默认的那张网格图
            startColor: '#0F08C8FF', //渐变起始颜色
            endColor: '#7F08C8FF', //渐变结束颜色
            animTime: 2200, //扫描动画时间,单位为毫秒
        };
        moduleScanner.toScannerActivityForResult(params, function (ret, err) {
            //alert(ret);扫码的结果都是编码
            //1：仓库
            if (idSelector == 'workCenterCode') {

                $("#workCenterCode").val(ret);
                //查询仓库
                getWorkCenter(ret, idSelector);

                //2:库位
            } else if (idSelector == 'workCellCode') {

                $("#workCellCode").val(ret);
                //查询库位
                 getWorkCell(ret, idSelector);

                //扫描条码
            } else if (idSelector == 'mrlCode') {
                //tmSplit(ret);
                $("#mrlCode").val(ret);
                //查询物料
                getMrl(ret, idSelector);
            }
        });
    }
    //向列表添加明细
    function addTable() {
        var qty = $("#qty").val();
        var packageQty = $("#packageQty").val();
        if (Number(qty) <= 0) {
            api.toast({
                msg: "数量需大于0！",
                duration: 3000
            });
            return;
        }
        if (mrlCode == "") {
            api.toast({
                msg: "请选择物料！",
                duration: 3000
            });
        }

        var model = {
            mrlCode: mrlCode,
            mrlName: mrlName,
            qty: qty + "",
            packageQty: packageQty + ""
        }

        var flag = false;
        for (var i = 0; i < datalist.length; i++) {
            if (datalist[i].mrlCode == mrlCode) {
                flag = true;
                datalist[i].qty = (Number(datalist[i].qty) + Number(qty)) + "";
            }
        }
        if (!flag) {
            datalist.push(model);
        }
        $("#mrlLine_tb").empty();
        var html2 = "";
        var seq2 = 1;
        for (var i = 0; i < datalist.length; i++) {
            var data = datalist[i];
            // var state = '';
            html2 += "<tr>";
            html2 += "<td>" + seq2 + "</td>"
            html2 += "<td>" + data.mrlCode + "</td>"
            html2 += "<td>" + data.mrlName + "</td>"
            // html2 += "<td>" + data.packageQty + "</td>"
            html2 += "<td>" + data.qty + "</td>"
            html2 += "</tr>";
            seq2++;
        }
        $("#mrlLine_tb").html(html2);
        //清空物料、数量
        $("#mrlCode").val("");
        $("#qty").val("");
        api.setFocus({
            inputId: 'mrlCode',
            focus: true
        })
        $("#mrlCode").select();
        idSelector = 'mrlCode';
    }


    //1：仓库扫描校验
    function getWorkCenter(code, inputId) {
        var un = localStorage.getItem('un');
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/getWorkCenter";
        var data = {
            values: { ////以表单方式提交参数（JSON对象）
                workCenterCode: code,
                mrlCode: "",
                lotCode: "",
                qty: "",
                un : un
            }
        };
        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 300,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");
                //成功
                if (myobj.code == '0') {
                    var list = eval(myobj.list);
                    workCenterGid = list[0].workCenterGid;
                    workCenterCode = list[0].workCenterCode;
                    workCenterName = list[0].workCenterName;
                    // document.getElementById(inputId).value = list[0].workCenterCode;
                    document.getElementById(inputId).value = list[0].workCenterCode + ":" + list[0].workCenterName;
                    api.setFocus({
                        inputId: 'workCellCode',
                        focus: true
                    })
                    idSelector = "workCellCode";

                } else {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                    api.setFocus({
                        inputId: 'workCenterCode',
                        focus: true
                    })
                    $("#workCenterCode").select();
                }
            }
        });
    }

    //2：选中仓库
    function goSelectWorkCenter() {
        api.openWin({
            name: 'uwmSelectWorkCenter',
            url: 'uwmSelectWorkCenter.html',
            pageParam: {
                flag: "in",
                name: "paAndonRequestMrl",
                mrlCode: "",
                lotCode: "",
                qty: ""
            }
        });
    }

     //仓库选择后回调函数
     function setWorkCenter(id, code, name) {
        workCenterGid = id;
        workCenterCode = code;
        workCenterName = name;
        document.getElementById('workCenterCode').value = code + ":" + name;
        $("#workCellCode").focus();
        api.setFocus({
            inputId: 'workCellCode',
            focus: true
        })
        idSelector = "workCellCode";
    }

    //3；PDA自带扫描回车事件
    $("#workCenterCode").on('keypress', function (e) { //#keyword为input文本框
        var keycode = e.keyCode;
        var sm = $(this).val();
        if (keycode == '13') {
            //仓库编码
            $("#workCenterCode").val(sm);
            //校验改箱码是否存在
            getWorkCenter(sm, "workCenterCode");
        }
    });

    //5:库位扫描校验
    function getWorkCell(code, inputId) {
        //扫库位前先扫仓库
        if (inputId == "workCellCode") {
            if (workCenterGid == "" || workCenterGid == null || workCenterGid == undefined) {
                api.toast({
                    msg: "请先选择/扫描 仓库",
                    duration: 3000
                });
                $("#workCellCode").val("");
                workCellCode = "";
                workCellGid = "";
                workCellName = "";
                return;
            }
        }
        var un = localStorage.getItem("un");
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/getWorkCell";
        var data = {
            values: {
                flag: "in_rk", //库内库间标识（out_kn库内  out_kj库间,in_rk入库出库）
                workCenterGid: workCenterGid, //仓库GID
                workCellCode: code, //库位编码
                relWorkCellGid: "", //调入库位
                tm: "",
                workCellFlag: "", //原库位调入库位flag
                un: un
            }
        };
        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 300,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");
                if (myobj.code == '0') {
                    var list = eval(myobj.list);
                    workCellGid = list[0].workCellGid;
                    workCellCode = list[0].workCellCode;
                    workCellName = list[0].workCellName;
                    document.getElementById(inputId).value = list[0].workCellCode + ":" + list[0].workCellName;
                    api.setFocus({
                        inputId: 'mrlCode',
                        focus: true
                    })
                    idSelector = "mrlCode";

                } else {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                    api.setFocus({
                        inputId: 'workCellCode',
                        focus: true
                    })
                    $("#workCellCode").select();
                }
            }
        });
    }

    //6：选择库位
    function goSelectWorkCell() {
        var tm = $("#tm").val();
        //仓库非空校验
        if (workCenterGid == "" || workCenterGid == null || workCenterGid == undefined) {
            api.toast({
                msg: "请先选择/扫描 仓库",
                duration: 3000
            });
            return;
        }

        api.openWin({
            name: 'uwmSelectWorkCell',
            url: 'uwmSelectWorkCell.html',
            pageParam: {
                flag: "in_rk",
                name: "paAndonRequestMrl",
                tm: tm,
                workCenterGid: workCenterGid,
                relWorkCellGid: "",
                workCellFlag: ""
            }
        });
    }

    //库位选择后回调函数
    function setWorkCell(id, code, name) {
        workCellGid = id;
        workCellCode = code;
        workCellName = name;
        document.getElementById('workCellCode').value = code + ":" + name;
        api.setFocus({
            inputId: 'mrlCode',
            focus: true
        })
        var e = "mrlCode";
        idSelector = e;
    }

    //7；PDA自带扫描回车事件-库位
    $("#workCellCode").on('keypress', function (e) { //#keyword为input文本框
        var keycode = e.keyCode;
        var sm = $(this).val();
        if (keycode == '13') {
            //仓库编码
            $("#workCellCode").val(sm);
            //校验改箱码是否存在
            getWorkCell(sm, "workCellCode");
        }
    });

    //物料扫描校验
    function getMrl(code, inputId) {

        var un = localStorage.getItem("un");
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/getMdMrlListGu";
        var data = {
            values: {
                codeQ: code,
                un: un,
            }
        };
        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 300,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {
                console.log("查完物料啦");
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");
                if (myobj.code == '0') {

                    var list = eval(myobj.list);
                    if (list.length > 0) {
                        mrlCode = list[0].code;
                        mrlName = list[0].name;
                        var packageQty = list[0].packageQty + "";
                        //document.getElementById("mrlCode").value = list[0].code + ":" + list[0].name;
                        $("#mrlCode").val(list[0].code + ":" + list[0].name);
                        $("#packageQty").val(packageQty);
                        $("#qty").focus();
                        $("#qty").select();
                        idSelector = "qty";
                    } else {
                        $("#mrlCode").val("");
                        api.setFocus({
                        inputId: 'mrlCode',
                        focus: true
                    })
                        $("#mrlCode").select();
                        idSelector = "mrlCode";
                        api.toast({
                            msg: "物料不存在！",
                            duration: 3000
                        });
                        return;
                    }



                } else {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                    api.setFocus({
                        inputId: 'mrlCode',
                        focus: true
                    })
                    $("#mrlCode").select();
                    idSelector = "mrlCode";
                }
            }
        });
    }

    //3；PDA自带扫描回车事件
    $("#mrlCode").on('keypress', function (e) { //#keyword为input文本框
        var keycode = e.keyCode;
        var sm = $(this).val();
        if (keycode == '13') {
            //仓库编码
            $("#mrlCode").val(sm);
            //校验物料是否存在
            getMrl(sm, "mrlCode");
        }
    });

    //选择物料
    function goSelectMrl() {
        api.openWin({
            name: 'usmSelectMrl',
            url: 'usmSelectMrl.html',
            pageParam: {
                name: "paAndonRequestMrl",
            }
        });
    }

    //物料选择后回调函数
    function setMrl(sysid, code, name) {
        $("#mrlCode").val(code);
        mrlCode = code;
        mrlName = name;
    }


</script>

</html>